<%--
  Created by IntelliJ IDEA.
  User: LT
  Date: 2018-10-25
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/static/hplus/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/hplus/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/hplus/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <script>

        //得到查询的参数
        function queryParams (params) {

        };

        $(function () {
            $("#usertb").bootstrapTable({
                url:'${pageContext.request.contextPath}/user/querySearch',
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                //启用服务器端分页
                sidePagination:'server',
                //设置每页多少条数据
                pageSize:2,
                pageList:[2,4,8,16],
                height:300,
                pageNumber:1,
                //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含
                //limit, offset, search, sort, order 否则, 需要包含:
                //pageSize, pageNumber, searchText, sortName, sortOrder.
                // 返回false将会终止请求。
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        username:$("#username").val()
                    };
                    return temp;
                },
                columns:[
                    {
                        field:'userid',
                        title:'编号'
                    },
                    {
                        field:'username',
                        title:'姓名'
                    },
                    {
                        field:'account',
                        title:'账号'
                    },
                    {
                        title: '分配',
                        formatter: function (value, row, index) {
                            return "<button class='btn  btn-primary' onclick='tofenpei(" + row.userid + ")'>分配角色</button>"
                        },
                    },
                ]
            }) ;
        }) ;



        function tofenpei(userid){
            userid1 =userid;

            var  s ="";
            var a =0;
            $("#fenpei").modal('show');
            $("#fenpei").on("shown.bs.modal",function(){
                if (++a ==1){

                    $.post('${pageContext.request.contextPath}/role/query',{"userid":userid},function(data){

                        for (var i=0;i<data.length;i++){
                            var r =data[i];
                            var gid = r.gid;
                            var gname =r.gname;
                            var ischecked =r.ischecked;

                            if (ischecked) {

                                s= s+"<div class='radio-inline'><input  name='js' checked type='radio' value=" + gid + "></input><label>"+gname +"</label></div>"
                            }else{
                                s= s+"<div class='radio-inline'><input  name='js'  type='radio' value=" + gid + "></input><label>"+gname +"</label></div>"
                            }


                        }
                        $("#juesebody").html(s) ;

                    }) ;
                }

            })
        }

        function searcha() {
            var opts = $("#usertb").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var username = $("#username").val() ;
            $.post("${pageContext.request.contextPath}/user/querySearch",{'username':username,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#usertb").bootstrapTable('load',data) ;
            })
        }

        var userid1;

        function dofenpei() {
            var gid =$("input[name ='js']:checked").val();
            $.post("${pageContext.request.contextPath}/user/dofenpei",{'userid':userid1,'Groupsid':gid},function(){
                //关闭对话框,刷新表格
                $("#fenpei").modal('hide') ;
                //   $("#usertb").bootstrapTable('load') ;
            }) ;

        }
    </script>

</head>
<body>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">用户列表</h3>
    </div>
    <div class="panel-body">
        <div class="row" style="margin-bottom: 10px">
            <form action="" class="form-inline">
                <div class="col-sm-4">
<%--                    <button class="btn btn-primary">
                        <span class="glyphicon glyphicon-plus"></span>增加
                    </button>--%>
                </div>
                <div class="col-sm-4 col-sm-offset-4 text-right">

                    <input id="username" type="text" class="form-control">
                    <input onclick="searcha()" type="button" class="btn btn-primary" value="查询">


                </div>
            </form>
        </div>
        <table id="usertb"></table>
    </div>
</div>


<!--分配角色的对话框-->
<!-- Modal -->
<div class="modal fade" id="fenpei" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" >提示信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12" id="juesebody">

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button onclick="dofenpei()" type="button" class="btn btn-primary">分配</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="Div3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">增加用户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post" id="fm">
                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">用户名:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="username" class="form-control" id="title1" placeholder="请输入用户名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">账号：</label>
                        <div class="col-sm-10">
                            <input  type="text" name="account" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="账号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">密码:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="userpwd" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="密码">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary"  onclick="doadd()" >增加</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


</body>
</html>
